import {
  getComponentProps,
  getComponentEvents,
  getComponentSlots,
  createDefaultEvent,
  type RenderFormItemContentOptions,
  type RenderFormItemContentParams,
  type ComponentParams
} from './common'
import ShiftSchedulePickerComp from '../components/shift-schedule-picker/index.vue'

// 改变值 和确认区分开
const handleChange = (_, val: ComponentParams) => {
  // const options = val[0]
  // const value = val[1]
  // Object.assign(options.data, value)
}

// 确定
const handleConfirm = (_, val: ComponentParams) => {
  // const options = val[0]
  // const value = val[1]
  // Object.assign(options.data, value)
}

const ShiftSchedulePicker = {
  // 项内容模板
  renderItemContent(renderOpts: RenderFormItemContentOptions, params: RenderFormItemContentParams) {
    const { data, field } = params
    // 默认属性
    const defaultProps = {}
    // 需要自定义的事件
    const omitEventsKeys = ['onConfirm', 'onChange']

    // 将组件ref实例挂载item的params中
    const componentRef = shallowRef<InstanceType<typeof ShiftSchedulePickerComp>>()
    // @ts-ignore vxe还没有更新类型
    // 防止递归更新
    if (!(params.item.params && params.item.params._firstRender)) {
      // @ts-ignore vxe还没有更新类型
      params.item.params = { ...(params.item.params || {}), _firstRender: true, componentRef }
    }

    return (
      <ShiftSchedulePickerComp
        v-model={data[field]}
        ref={componentRef}
        {...getComponentProps(renderOpts, defaultProps)}
        {...getComponentEvents(renderOpts, params, omitEventsKeys)}
        onConfirm={createDefaultEvent(renderOpts, params, 'confirm', handleConfirm)}
        onChange={createDefaultEvent(renderOpts, params, 'change', handleChange)}
      >
        {{ ...getComponentSlots(renderOpts) }}
      </ShiftSchedulePickerComp>
    )
  }
}

export default { ShiftSchedulePicker }
